
<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->


    <!-- 操作按钮区域 -->

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <a style="margin-left: 2px" >系统列表</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :showHeader="false"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a  @click="handleRedirect(record.keyWord,record.name)">{{record.name}}</a>
<!--          <a-divider type="vertical"/>-->
<!--          <a-dropdown>-->
<!--            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>-->
<!--            <a-menu slot="overlay">-->
<!--              <a-menu-item>-->
<!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
<!--                  <a>删除</a>-->
<!--                </a-popconfirm>-->
<!--              </a-menu-item>-->
<!--              <a-menu-item>-->
<!--                  <a  @click="handleRedirect(record.keyWord)">访问</a>-->
<!--              </a-menu-item>-->
<!--            </a-menu>-->
<!--          </a-dropdown>-->
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <jantdDemo-modal ref="modalForm" @ok="modalFormOk"></jantdDemo-modal>

    <!-- 一对多表单区域 -->
    <JantdDemoTabsModal ref="jantdDemoTabsModal" @ok="modalFormOk"></JantdDemoTabsModal>

    <!-- 高级查询区域 -->
    <j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
  </a-card>
</template>

<script>
    import JantdDemoModal from './modules/SsoDemoModal'
    import JSuperQuery from '@/components/jantd/JSuperQuery.vue';
    import JantdDemoTabsModal from './modules/SsoDemoTabsModal'
    import {filterDictText, initDictOptions} from '@/components/dict/JDictSelectUtil'
    import {JantdListMixin} from '@/mixins/JantdListMixin'
    import Vue from 'vue'
    import {ACCESS_TOKEN} from '@/store/mutation-types'
    //高级查询modal需要参数
    const superQueryFieldList=[{
        type:"date",
        value:"birthday",
        text:"生日"
    },{
        type:"string",
        value:"name",
        text:"用户名"
    },{
        type:"int",
        value:"age",
        text:"年龄"
    }]
    export default {
        name: "JantdDemoList",
        mixins:[JantdListMixin],
        components: {
            JantdDemoModal,
            JSuperQuery,
            JantdDemoTabsModal,
        },
        data() {
            return {
                description: '用户管理页面',
                //字典数组缓存
                sexDictOptions: [],
                importExcelUrl:`${window._CONFIG['domianURL']}/test/jantdDemo/importExcel`,
                // 表头
                columns: [

                    {
                        title: '系统名称',
                        dataIndex: 'action',
                        align: "center",
                        scopedSlots: {customRender: 'action'},
                    }
                ],
                url: {
                    list: "/test/sso/list",
                },
                fieldList:superQueryFieldList
            }
        },
        methods: {
            handleRedirect(path,name){
                console.log(Vue.ls.get(ACCESS_TOKEN))
                window.location.href =path
            }
        }
    }
</script>
<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }
</style>